<!--
 * @Author: xiemei
 * @Date: 2021-07-01 18:23:54
 * @LastEditors: xiemei
 * @LastEditTime: 2021-07-01 18:25:20
 * @FilePath: \vue-bilibili-v2\06-tabbar\src\views\Home.vue
-->
<template>
    
  <div id="home">
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
    <tab-control :titles="['流行', '新款', '精选']"
                   @itemClick='itemClick'
                   ref='tabControl1'
                   class="tab-control"
                   v-show="isTabFixed" />
    <!-- 传入probe-type时，要有: 不然传入的值会被传为字符串类型，而不是数字类型 -->
    <scroll class="content" 
            ref="scroll" 
            :probe-type='3' 
            @scroll='contentScroll'
            :pull-up-load='true'
            @pullingUp='loadMore'>
      <home-swiper :banners="banners" @swiperImageLoad='swiperImageLoad'></home-swiper>
      <recommend-view :recommends="recommends"></recommend-view>
      <feature-view />
      <tab-control :titles="['流行', '新款', '精选']"
                   @itemClick='itemClick'
                   ref='tabControl2' />
      <goods-list :goods="showGoods"></goods-list>
    </scroll>
    <!-- 没有native，点击事件可能不成立 -->
    <back-top @click.native="backClick" v-show="isShowBackTop"/>
      
  </div>
</template>

<script>
import HomeSwiper from "./childComps/HomeSwiper";
import RecommendView from "./childComps/RecommendView";
import FeatureView from "./childComps/FeatureView";

import NavBar from "components/common/navbar/NavBar";
import TabControl from "components/content/tabControl/TabControl";
import GoodsList from 'components/content/goods/GoodsList';
import Scroll from 'components/common/scroll/Scroll';
import BackTop from 'components/content/backTop/BackTop';

import { getHomeMultidata, getHomeGoods } from "network/home";
import {debounce} from "common/utils";




// import {SwiperItem} from 'components/common/swiper'

export default {
  name: "Home",
  components: {
    HomeSwiper,
    RecommendView,
    FeatureView,
    NavBar,
    TabControl,
    GoodsList,
    Scroll,
    BackTop
  },
  // 存放请求过来的数据
  data() {
    return {
      banners: [],
      recommends: [],
      // 请求存放  TabControl中的  流行/新闻/精选
      goods: {
        'pop': { page: 0, list: [] },
        'new': { page: 0, list: [] },
        'sell': { page: 0, list: [] },
      },
      currentType:'pop',
      isShowBackTop:false,
      // offsetTop属性？
      tabOffsetTop:0,
      isTabFixed:false,
      saveY:0,
      // result:null
    };
  },
  computed: {
    showGoods(){
      return this.goods[this.currentType].list
    },
    
  },
  // 首页组件创建完后，发送网路请求
  created() {
    // 1.请求多个数据
    // 写this才能调用到methods中的函数，不然还是导入的home.js中的函数
    this.getHomeMultidata()
    // 2.请求商品数据
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')
    // 3.监听item中图片加载完成
    // this.$bus.$on('itemImageLoad',()=>{
    //   this.$refs.scroll.refresh()
    // })
  },
  mounted () {
    // 1.图片加载完成的事件监听
    const refresh = debounce(this.$refs.scroll.refresh,50)
    this.$bus.$on('itemImageLoad',()=>{
      refresh()
    })
    // 2.获取tabControl的offsetTop
    // 所有的组件都有一个属性$el：用于获取组件中的元素
    // this.tabOffsetTop = this.$refs.tabControl.$el.offsetTop

  },
  // 切换页面时保存位置信息
  activated () {
    this.$refs.scroll.scrollTo(0,this.saveY,0)
    this.$refs.scroll.refresh() 
  },
  deactivated () {
    // this.saveY = this.$refs.scroll.scroll.y;
    this.saveY = this.$refs.scroll.getScrollY()
  },
  methods: {
    /* 
        事件监听相关方法 
    */
   //debounce抽取
   itemClick(index){
     switch(index){
       case 0:
         this.currentType = 'pop'
         break
       case 1:
         this.currentType = 'new'
         break
       case 2:
         this.currentType = 'sell'
         break
     }
    //  让两个TabControl保持一致
     this.$refs.tabControl1.currentType = index;
     this.$refs.tabControl2.currentType = index;
   },
   backClick(){
    //  没有封装的情况下直接使用scrollTo()
    //  this.$refs.scroll.scroll.scrollTo(0,0,500)

    // 调用Scroll组件中封装的scrollTo方法
    this.$refs.scroll.scrollTo(0,0)
   },
   contentScroll(position){
    //  1.BackTop是否显示
     this.isShowBackTop = -(position.y) > 1000
    //  2.决定tabControl是否吸顶(position:fixed)
    this.isTabFixed = (-position.y) > this.tabOffsetTop
   },
   loadMore(){
     this.getHomeGoods(this.currentType)

    // 重新计算最新的可滚动的区域，加载图片后的情况
     this.$refs.scroll.scroll.refresh()
   },
  //  监听轮播图加载完成后
   swiperImageLoad(){
     // 所有的组件都有一个属性$el：用于获取组件中的元素
     this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
   },
    /* 
        网络请求相关方法 
    */
    getHomeMultidata() {
      getHomeMultidata().then((res) => {
        // this.result = res.data;
        this.banners = res.data.data.banner.list;
        this.recommends = res.data.data.recommend.list;
      });
    },
    // 获取当前类型某一页的数据
    getHomeGoods(type) {
      const page = this.goods[type].page + 1
      getHomeGoods(type, page).then(res =>{
        // console.log(res)
        this.goods[type].page += 1
        // 相当于push，每次依次传入很多
        this.goods[type].list.push(...res.data.data.list)
        // 完成上拉加载更多，因为scroll默认只会加载一次
        this.$refs.scroll.finishPullUp()
      }) 
    },
  },
};
</script>

<style scoped>
#home {
  padding-top: 44px;
  height: 100vh;
  position: relative;
}

.home-nav {
  background-color: var(--color-tint);
  color: #fff;

  /* 浏览器原生滚动时，固定顶部导航条 */
 position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9; 
}

/* .tab-control {
  吸顶固定
  position: sticky;
  top: 44px;
  background-color: #fff;
}  */

/* .content{
  height: calc(100% - 93px);
  overflow: hidden;
  margin-top: 44px;
} */

.content{
  /* height: 300px; */
  overflow:hidden;

  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}

.tab-control{
  position:relative;
  z-index: 9;
}
</style>
